{block name='content'}
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body padding-40 margin-bottom-40" style="height: 300px; overflow-y: auto;">
        <div class="layui-form-item layui-row layui-col-space15">
            <div class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">柜点类型</span><span class="margin-left-5 color-desc">Store Type</span>
                <select class="layui-select" lay-verify="required" required lay-search name="d_id">
                    <option value="">请选择 设备</option>
                    {foreach name="$devices" id="val"}
                    {if isset($vo.d_id) AND $vo.d_id eq $key}
                    <option selected value="{$key}">{$val}</option>
                    {else}
                    <option value="{$key}">{$val}</option>
                    {/if}
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-col-xs12 block relative">
            <table class="layui-table margin-top-10">
                <thead>
                <th class="text-center" style="width: 10px"><button type="button" class="layui-btn layui-btn-sm add"><i class="layui-icon" style="margin: 0px;">&#xe654;</i></button></th>
                <th class="text-center">类型</th>
                <th class="text-center">状态</th>
                <th class="text-center">备注</th>
                </thead>
                <tbody id="box_body">

                </tbody>
            </table>
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        {if $title!="查看柜点"}
        <button class="layui-btn" lay-submit lay-filter="submit">保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-history-back>取消编辑</button>
        {/if}
    </div>
</form>

<script id="demo" type="text/html">
    <tr>
        <input type="hidden" class="set_name" data-name="box_id">
        <td class="text-center del" data-value=""></td>
        <td>
            <select class="layui-select set_name" lay-search data-name="box_type">
                <option value="">请选择 箱格类型</option>
                {foreach name="$box_types" id="val"}
                <option value="{$key}">{$val}</option>
                {/foreach}
            </select>
        </td>
        <td>
            <select class="layui-select set_name" lay-search data-name="box_status">
                <option value="">请选择 箱格状态</option>
                {foreach name="$box_status" id="val"}
                <option value="{$key}">{$val}</option>
                {/foreach}
            </select>
        </td>
        <td>
            <input class="layui-input set_name" data-name="remark" value="" placeholder="请输入 备注">
        </td>
    </tr>
</script>
{/block}

{block name='script'}
<script>
    (function () {
        var title = "{$title}";
        if(title=='查看柜点'){
            $("input,select").attr("readOnly", true);
        }

        $(".add").click(function () {
            $("#box_body").append($("#demo").html());
            setBoxId();

            $(".del").hover(function () {
                $(this).text("").append('<button type="button" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon" style="margin: 0px;">&#xe640;</i></button>');
            }, function () {
                setBoxId();
            });

            $(".del").click(function () {
                $(this).parent().remove();
                setBoxId();
            })
            layui.form.render();
        })

        function setBoxId(){
            $("#box_body").find('tr').each(function (i) {
                $(this).find("td").eq(0).text(i+1).attr("data-value", i+1);
                $(this).find("input[type=hidden]").val(i+1);
                $(this).find(".set_name").each(function () {
                    $(this).attr("name", "boxs["+i+"]"+$(this).data("name"));
                    console.log($(this).attr("name"));
                })
            })
        }


        layui.form.render();

    })();
</script>
{/block}